<template>
  <div class="hello">
    <h1>
      {{ msg }}
    </h1>
    <p>
      基于开源库CSSFX效果的vue组件,
      <br />
      <a href="https://cssfx.dev/">
        友情链接：CSSFX
      </a>
    </p>
    <h3>
      前往下载
    </h3>
    <ul>
      <li>
        <a href="https://www.npmjs.com/package/vue-effects">
          npm地址
        </a>
      </li>
    </ul>
    <h3 @click.native="showLoading()">
      推荐库
    </h3>
    <ul>
      <li>
        <a
          href="https://panjiachen.gitee.io/awesome-bookmarks/repository/#css-%E5%8A%A8%E7%94%BB"
        >
          awesome-vue
        </a>
      </li>
    </ul>
    <e-loading
      @click.native="showLoading()"
      :type="'circle'"
      :class="{ show: isLoading }"
      >正在努力加载</e-loading
    >
    <div class="element-box">
      <e-button :type="'jelly'" @click.native="showLoading()">
        jelly按钮
      </e-button>
      <br />
      <e-button :type="'pulse'">
        pulse按钮
      </e-button>
      <br />
      <e-button :type="'slide'">
        slide按钮
      </e-button>
    </div>
    <div class="element-box">
      <e-input :type="'apollo'" />
      <br />
      <e-input :type="'hera'" />
      <br />
      <e-input :type="'poseidon'" />
      <br />
      <e-input :type="'aphrodite'" />
    </div>
    <div class="element-box">
      <e-label>bars</e-label>
      <br />
      <e-label :type="'highlight'">highlight</e-label>
      <br />
      <e-label :type="'overline'">overline</e-label>
      <br />
      <e-label :type="'pillars'">pillars</e-label>
      <br />
      <e-label :type="'strikethrough'">strikethrough</e-label>
      <br />
      <e-label :type="'underline'">Underline</e-label>
      <e-mask :class="{ mask: isMask }" @click.native="showMask()">
        <label>
          HMS
        </label>
      </e-mask>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      isLoading: true,
      isMask: false
    };
  },
  methods: {
    showLoading() {
      this.isLoading = !this.isLoading;
    },
    showMask() {
      this.isMask = !this.isMask;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.element-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 250px;
}
.show {
  display: none;
}
.mask {
  display: none;
}
</style>
